<!-- 公共列表组件 -->
<template>
	<!-- 列表样式 start -->
	<view class="king-padding-20 king-margin-10 king-rounded-circle-10 bg-white">
		
		<!-- 头像昵称|关注按钮 start -->
		<view class="king-flex king-align-center king-justify-between">
			
			<!-- 头像昵称区域 start -->
			<view class="king-flex king-align-center">
				
				<!-- 头像 start -->
				<image class="king-rounded-circle king-margin-right-20" :src="item.avatar" style="width: 70rpx; height: 70rpx;" @tap="openSpace" lazy-load mode="scaleToFill"></image>
				<!-- 头像 end -->
				
				<!-- 昵称/发布时间 start -->
				<view class="">
					<view class="king-font" style="line-height: 1.5;">{{item.nickName}}</view>
					<text class="king-font-sm king-text-light-muted" style=" line-height: 1.5;">{{item.addTime}}</text>
				</view>
				<!-- 昵称/发布时间 start -->
				
			</view>
			<!-- 头像昵称区域 end -->
			
			<!-- 关注按钮 start -->
			<view v-if="!item.isFollow" class="king-flex king-align-center king-justify-center king-rounded-circle-10 bg-main king-text-white animated faster" @tap="follow" hover-class="pulse" style="width: 110rpx; height: 60rpx; font-size: 24rpx;">
				+ 关注
			</view>
			<!-- 关注按钮 end -->
			
		</view>
		<!-- 头像昵称|关注按钮 end -->
		
		<!-- 标题 start -->
		<view class="king-font king-margin-y-30" @tap="openDetail">
			{{item.content}}
		</view>
		<!-- 标题 end -->
		
		<!-- 图片 start -->
		<image v-if="item.pictures" class="king-rounded-circle-10 king-width" :src="item.pictures" style="height: 350rpx;" @tap="openDetail" mode="scaleToFill"></image>
		<!-- 图片 end -->
		
		<!-- 图标按钮 start -->
		<view class="king-flex king-align-center king-margin-top-20">
			
			<!-- 点赞 start -->
			<view class="king-flex king-align-center king-justify-center king-flex-1 king-text-light-muted animated faster" :class="item.support.status ? 'active-font' : ''" hover-class="pulse text-main" @tap="doSupport">
				<text class="iconfont icon-dianzan2 king-margin-right-20"></text>
				<text class="king-font-sm">{{item.support.total > 0 ? item.support.total : '赞'}}</text>
			</view>
			<!-- 点赞 end -->
			
			<!-- 评论 start -->
			<view class="king-flex king-align-center king-justify-center king-flex-1 king-text-light-muted animated faster" hover-class="pulse text-main" @tap="openDetail">
				<text class="iconfont icon-pinglun2 king-margin-right-20"></text>
				<text class="king-font-sm">{{item.commentTotal > 0 ? item.commentTotal : '评论'}}</text>
			</view>
			<!-- 评论 end -->
			
			<!-- 分享 start -->
			<view class="king-flex king-align-center king-justify-center king-flex-1 king-text-light-muted animated faster" hover-class="pulse text-main" @tap="openDetail">
				<text class="iconfont icon-fenxiang king-margin-right-20"></text>
				<text class="king-font-sm">分享</text>
			</view>
			<!-- 分享 end -->
			
		</view>
		<!-- 图标按钮 end -->
		
	</view>
	<!-- 列表样式 end -->
</template>

<script>
	export default {
		props: {
			item: Object,
			index: Number
		},
		methods: {
			// 打开个人空间
			openSpace() {
				console.log('打开个人空间');
			},
			// 关注
			follow() {
				// 通知父组件，触发父组件的 follow 事件
				this.$emit("follow", this.index);
			},
			// 进入详情页
			openDetail() {
				console.log('查看详情')
			},
			// 赞/取消赞
			doSupport() {
				this.$emit("doSupport", this.index);
			}
			
		}
	}
</script>

<style>
</style>
